<?php
    if(basename(__FILE__) == basename($_SERVER['PHP_SELF'])){exit();}
?>
<style type="text/css">
    label { display: block; }
    #new_user_overlay fieldset {
        border: 0px;
    }
</style>

<div class="modal" id="new_user_overlay" style="display:none;width:800px;height:600">
    <h2 class="plus">Add a New User</h2>
    
    <form id="new_user_form" name="new_user_form" action="" onSubmit="return false;">
        <fieldset>
            <p>
                <b>Enter details for the new user:</b>
            </p>
            
            <table style="width:100%;">
                <tr>
                    <td style="vertical-align: top;width: 350px;"><table>
                            <tr><td><label for="new_user_username">Username: <div class="required"></div></label></td><td><input type="text" id="new_user_username" name="new_user_username" /></td><td id="new_user_username_v"></td></tr>
                        <tr><td><label for="new_user_password">Password: <div class="required"></div></label></td><td><input type="password" id="new_user_password" name="new_user_password" /></td><td id="new_user_password_v"></td></tr>
                        <tr><td><label for="new_user_password_confirm">Confirm Password: <div class="required"></div></label></td><td><input type="password" id="new_user_password_confirm" name="new_user_password_confirm" /></td> <td id="new_user_password_confirm_v"></td></tr>
                        <tr><td><label for="new_user_id">User ID (Optional): </label></td><td><input type="text" id="new_user_id" name="new_user_id" /></td> <td id="new_user_id_v"></td></tr>
                        <tr style="height: 20px;"></tr>
                        <tr><td><label for="new_user_first_name">First Name: <div class="required"></div></label></td><td><input type="text" id="new_user_first_name" name="new_user_first_name" /></td><td id="new_user_first_name_v"></td> </tr>
                        <tr><td><label for="new_user_last_name">Last Name: <div class="required"></div></label></td><td><input type="text" id="new_user_last_name" name="new_user_last_name" /></td><td id="new_user_last_name_v"></td> </tr>
                        <tr><td><label for="new_user_address">Address: <div class="required"></div></label></td><td><input type="text" id="new_user_address" name="new_user_address" /></td><td id="new_user_address_v"></td> </tr>
                        <tr><td><label for="new_user_city">City: <div class="required"></div></label></td><td><input type="text" id="new_user_city" name="new_user_city" /></td><td id="new_user_city_v"></td> </tr>
                        <tr><td><label for="new_user_state">State: <div class="required"></div></label></td><td><select name="new_user_state" id="new_user_state"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></td><td id="new_user_state_v"></td> </tr>
                        <tr><td><label for="new_user_zip">Zip Code: <div class="required"></div></label></td><td><input type="text" id="new_user_zip" name="new_user_zip" /></td><td id="new_user_zip_v"></td> </tr>
                        <tr><td><label for="new_user_tel">Telephone #: <div class="required"></div></label></td><td><input type="text" id="new_user_tel" name="new_user_tel" /></td><td id="new_user_tel_v"></td> </tr>
                        <tr style="height: 20px;"></tr>
                        <tr><td><div class="required"></div> = Required</td></tr>
                    </table></td>
                    <td style="width:30px;"></td>
                    <td style="vertical-align: top;">
                        <table>
                            <tr><td><label for="new_user_type">User Type: <div class="required"></div></label></td><td><select name="new_user_type" id="new_user_type"><option value="Customer">Customer</option><option value="Representative">Representative</option><option value="Manager">Manager</option></select></td></tr>
                        </table>
                        <div style="height: 30px"></div>
                        <div id="new_user_type_special">
                            <table id="new_user_type_customer">
                                <tr><td><label for="new_user_customer_email">Customer Email: <div class="required"></div></label></td><td><input type="text" id="new_user_customer_email" name="new_user_customer_email" /></td><td id="new_user_customer_email_v"></td></tr>
                                <tr><td><label for="new_user_customer_rating">Customer Rating (Optional): </div></label></td><td><input type="text" id="new_user_customer_rating" name="new_user_customer_rating" /></td><td id="new_user_customer_rating_v"></td></tr>
                                <tr><td><label for="new_user_customer_creditcardnumber">Customer Credit Card #: <div class="required"></div></label></td><td><input type="text" id="new_user_customer_creditcardnumber" name="new_user_customer_creditcardnumber" /></td><td id="new_user_customer_creditcardnumber_v"></td></tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3"><br/>
                        <div id="new_user_result" style="display:none;" ></div>
                    <br></td>
                </tr>
                <tr>
                    
                    <td colspan="3"><center><input type="submit" id="new_user_button" class="button blue" value="Add User" /><center></td>
                </tr>
            </table>
            
        </fieldset>
    </form>
    
    <div id="new_user_hidden" style="display:none">
        <table id="new_user_type_employee">
            <tr><td><label for="new_user_employee_ssn">Employee SSN: <div class="required"></div></label></td><td><input type="text" id="new_user_employee_ssn" name="new_user_employee_ssn" /></td><td id="new_user_employee_ssn_v"></td></tr>
            <tr><td><label for="new_user_employee_startdate">Employee Start Date: <div class="required"></div></div></label></td><td><input type="text" id="new_user_employee_startdate" name="new_user_employee_startdate" /></td><td id="new_user_employee_startdate_v"></td></tr>
            <tr><td><label for="new_user_employee_hourlyrate">Employee Hourly Rate: <div class="required"></div></label></td><td><input type="text" id="new_user_employee_hourlyrate" name="new_user_employee_hourlyrate" /></td><td id="new_user_employee_hourlyrate_v"></td></tr>      
        </table>
    </div>
</div>


<script type="text/javascript">
    function clearNewUserForm() {
        $("#new_user_form")[0].reset();
        $("#new_user_customer_email").val("");
        $("#new_user_customer_rating").val("");
        $("#new_user_customer_creditcardnumber").val("");
        $("#new_user_employee_ssn").val("");
        $("#new_user_employee_startdate").val("");
        $("#new_user_employee_hourlyrate").val("");
    }
    //Form Tooltips
    //$("#new_user_username").qtip({content: "Test Text", show: { ready: true }/*show: {delay: 0,when: {event: 'focus'}}*/,style: {name: 'dark'},position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}});
    $("#new_user_username").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_username').bind('keyup change', function() {
                var v = $("#new_user_username_v");
                var u = $("#new_user_username").val();
                if (u.length < 5 || u.length > 20) {
                    v.attr("class", "invalid");
                    self.updateContent("Pick a username between 5 and 20 characters long.");
                } else {
                    $.ajax({
                        type: 'GET',
                        url: '../backend/validate_form.php',
                        data: {
                            form: "new_user",
                            field: "user_name",
                            data: u
                        },
                        success: function(data) {
                            if (data == 1) {
                                v.attr("class", "valid");
                                self.updateContent("Pick a username between 5 and 20 characters long.");
                            } else if (data == 0) {
                                v.attr("class", "invalid");
                                self.updateContent("Pick a username between 5 and 20 characters long.");
                            } else {
                                v.attr("class", "invalid");
                                self.updateContent(data);
                            }
                        }
                    });
                }
            });
        }}, content: "Pick a username between 5 and 30 characters long.", 
        show: { when: 'focus keyup change', delay: 0 }, 
        hide: {when: 'blur', delay: 0}, 
        style: {name: 'dark'},
        position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_password").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_password').bind('keyup change', function() {
                var c = $("#new_user_password").val();
                var d = $("#new_user_password_confirm").val();
                var v = $("#new_user_password_v");
                var v1 = $("#new_user_password_confirm_v")
                if (c.length < 5 || c.length > 20) {
                    v.attr("class", "invalid");
                    self.updateContent("Pick a password between 5 and 20 characters long.");
                    return;
                } else {
                    v.attr("class", "valid");
                }
                if (d != "") {
                    if (c != d) {
                        v1.attr("class", "invalid");
                        self.updateContent("The passwords do not match!");
                        return;
                    } else {
                        v1.attr("class", "valid");
                        self.updateContent("Pick a password between 5 and 20 characters long.");
                    }
                }
            });
        }}, content: "Pick a password between 5 and 20 characters long.", 
        show: { when: 'focus keyup change', delay: 0 }, 
        hide: {when: 'blur', delay: 0}, 
        style: {name: 'dark'},
        position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_password_confirm").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_password_confirm').bind('keyup change', function() {
                var c = $("#new_user_password").val();
                var d = $("#new_user_password_confirm").val();
                var v1 = $("#new_user_password_confirm_v");
                if (c != d) {
                    v1.attr("class", "invalid");
                    self.updateContent("The passwords do not match!");
                    return;
                } else {
                    v1.attr("class", "valid");
                    $("#new_user_password_confirm").qtip("hide");
                }
            });
        }},
        content: "Please confirm the password.", 
        show: { when: 'focus keyup change', delay: 0 }, 
        hide: {when: 'blur', delay: 0}, 
        style: {name: 'dark'},
        position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    $("#new_user_id").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_id').bind('focus keyup change', function() {
                var d = $("#new_user_id").val();
                var v = $("#new_user_id_v");
                if (d == "") {
                    v.attr("class", "");
                    return;
                }
                if (!isNumber(d) || d < 1 || d > 999999999 || !isAllNumbers(d)) {
                    v.attr("class", "invalid");
                    self.updateContent("Please enter a number between 1 and 999999999.");
                    return;
                } else {
                    $.ajax({
                        type: 'GET',
                        url: '../backend/validate_form.php',
                        data: {
                            form: "new_user",
                            field: "id",
                            data: d
                        },
                        success: function(data) {
                            if (data == 1) {
                                v.attr("class", "valid");
                                self.updateContent("Please enter a number between 1 and 999999999.");
                            } else if (data == 0) {
                                v.attr("class", "invalid");
                                self.updateContent("Please enter a number between 1 and 999999999.");
                            } else {
                                v.attr("class", "invalid");
                                self.updateContent(data);
                            }
                        }
                    });
                }
            });
            $("#new_user_id").blur( function() {
                if ($("#new_user_id").val() == "") {
                    $("#new_user_id").qtip("hide");
                    $("#new_user_id_v").attr("class", "");
                }
            });
        }},
        content: "Please enter a number between 1 and 999999999.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    
    $("#new_user_first_name").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_first_name').bind('focus keyup change', function() {
                var d = $("#new_user_first_name").val();
                var v = $("#new_user_first_name_v");
                if (d == "") {
                    v.attr("class", "invalid");
                    self.updateContent("Enter the user's first name.");
                } else {
                    if (d.length > 30) {
                        v.attr("class", "invalid");
                        self.updateContent("Too many characters. Limit: 30. Current: " + d.length + ".");
                    } else {    
                        v.attr("class", "valid");
                        self.updateContent("Enter the user's first name.");
                    }
                }
            });
        }},
        content: "Enter the user's first name.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_last_name").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_last_name').bind('focus keyup change', function() {
                var d = $("#new_user_last_name").val();
                var v = $("#new_user_last_name_v");
                if (d == "") {
                    v.attr("class", "invalid");
                    self.updateContent("Enter the user's last name.");
                } else {
                    if (d.length > 30) {
                        v.attr("class", "invalid");
                        self.updateContent("Too many characters. Limit: 30. Current: " + d.length + ".");
                    } else {    
                        v.attr("class", "valid");
                        self.updateContent("Enter the user's last name.");
                    }
                }
            });
        }},
        content: "Enter the user's last name.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_address").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_address').bind('focus keyup change', function() {
                var d = $("#new_user_address").val();
                var v = $("#new_user_address_v");
                if (d == "") {
                    v.attr("class", "invalid");
                    self.updateContent("Enter the user's address.");
                } else {
                    if (d.length > 75) {
                        v.attr("class", "invalid");
                        self.updateContent("Too many characters. Limit: 75. Current: " + d.length + ".");
                    } else {    
                        v.attr("class", "valid");
                        self.updateContent("Enter the user's address.");
                    }
                }
            });
        }},
        content: "Enter the user's last name.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_city").qtip({
        api: { onRender: function() {
            var self = this;
            $('#new_user_city').bind('focus keyup change', function() {
                var d = $("#new_user_city").val();
                var v = $("#new_user_city_v");
                if (d == "") {
                    v.attr("class", "invalid");
                    self.updateContent("Enter the user's city of residence.");
                } else {
                    if (d.length > 50) {
                        v.attr("class", "invalid");
                        self.updateContent("Too many characters. Limit: 50. Current: " + d.length + ".");
                    } else {    
                        v.attr("class", "valid");
                        self.updateContent("Enter the user's city of residence.");
                    }
                }
            });
        }},
        content: "Enter the user's city of residence.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_state").qtip({
        api: { onRender: function() {
            $('#new_user_state').bind('focus keyup change', function() {
                var d = $("#new_user_state").val();
                var v = $("#new_user_state_v");
                if (d == "") {
                    v.attr("class", "invalid");
                } else {  
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Select the user's state of residence.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_zip").qtip({
        api: { onRender: function() {
            $('#new_user_zip').bind('focus keyup change', function() {
                var d = $("#new_user_zip").val();
                var v = $("#new_user_zip_v");
                if (d == "" || d.length < 5 || d.length > 5 || !isNumber(d) || d < 0 || d > 99999) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the user's 5 digit zip code. (Format: 12345)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_tel").qtip({
        api: { onRender: function() {
            $('#new_user_tel').bind('focus keyup change', function() {
                var d = $("#new_user_tel").val();
                var v = $("#new_user_tel_v");
                if (d.length != 12 || d[3] != '-' || d[7] != '-' || !isTelNum(d)) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the user's telephone number. (Format: 123-456-7890)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    function isTelNum(v) {
        for (var i = 0;i < v.length;i++) {
            if (i == 3 || i == 7) continue;
            var t = isNumber(v[i]);
            if (!t) return t;
        }
        return true;
    }
    $("#new_user_type").change(function() {
        $("#new_user_hidden").append($("#new_user_type_special > table"));
        if ($("#new_user_type").val() == "Customer") {
            $("#new_user_type_special").append($("#new_user_type_customer"));
        } else if ($("#new_user_type").val() == "Representative") {
            $("#new_user_type_special").append($("#new_user_type_employee"));
        } else if ($("#new_user_type").val() == "Manager") {
            $("#new_user_type_special").append($("#new_user_type_employee"));
        }
    });
    
    $("#new_user_customer_email").qtip({
        api: { onRender: function() {
            $('#new_user_customer_email').bind('focus keyup change', function() {
                var d = $("#new_user_customer_email").val();
                var v = $("#new_user_customer_email_v");
                if (!checkEmail(d)) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the customer's email. (Format: john@example.com)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    function checkEmail(v) {
        return v.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
    }
    $("#new_user_customer_rating").qtip({
        api: { onRender: function() {
            $('#new_user_customer_rating').bind('focus keyup change', function() {
                var d = $("#new_user_customer_rating").val();
                var v = $("#new_user_customer_rating_v");
                if (d == "") {
                    v.attr("class", "");
                    return;
                }
                if (!isNumber(d) || d < 0 || d > 1000000) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the customer's rating between 1 and 1000000.", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    function checkCCN(v) {
        return v.match(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/);
    }
    $("#new_user_customer_creditcardnumber").qtip({
        api: { onRender: function() {
            $('#new_user_customer_creditcardnumber').bind('focus keyup change', function() {
                var d = $("#new_user_customer_creditcardnumber").val();
                var v = $("#new_user_customer_creditcardnumber_v");
                if (!checkCCN(d)) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the customer's credit card number. (Format: 4111111111111111)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_employee_ssn").qtip({
        api: { onRender: function() {
            $('#new_user_employee_ssn').bind('focus keyup change', function() {
                var d = $("#new_user_employee_ssn").val();
                var v = $("#new_user_employee_ssn_v");
                if (!isNumber(d) || d.length != 9) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the employee's Social Security Number. (Format: 123456789)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    function validDate(v) {
        return v.match(/^(19|20|21)\d\d[-](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$/);
    }
    $("#new_user_employee_startdate").qtip({
        api: { onRender: function() {
            $('#new_user_employee_startdate').bind('focus keyup change', function() {
                var d = $("#new_user_employee_startdate").val();
                var v = $("#new_user_employee_startdate_v");
                if (!validDate(d)) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the employee's start date. (Format: 1990-05-29)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    $("#new_user_employee_hourlyrate").qtip({
        api: { onRender: function() {
            $('#new_user_employee_hourlyrate').bind('focus keyup change', function() {
                var d = $("#new_user_employee_hourlyrate").val();
                var v = $("#new_user_employee_hourlyrate_v");
                if (!isNumber(d)) {
                    v.attr("class", "invalid");
                } else {
                    v.attr("class", "valid");
                }
            });
        }},
        content: "Enter the employee's hourly rate, in dollars, rounded down. (Format: 90)", show: { when: 'focus keyup change', delay: 0 }, hide: {when: 'blur', delay: 0}, style: {name: 'dark'}, position: {corner: {tooltip: 'leftMiddle',target: 'rightMiddle'},adjust: {x: 30}}
    });
    
    function isAllNumbers(v) {
        for (var i = 0;i < v.length; i++) {
            var t = v[i].match(/^[0-9]$/);
            if (!t) return 0;
        }
        return 1;
    }
</script>

<script type="text/javascript">
    //Overlay init and submit
    $("#new_user").overlay(
        {
            closeOnClick: true,
            closeOnEsc: true,
            speed: 'fast',
            fixed: false,
            mask: {
                color: '#ebecff',
                loadSpeed: 200,
                opacity: 0.9
            },
            onBeforeClose: function() {
                $('.qtip.ui-tooltip').qtip('hide');
            }
        }
    );
    $("#new_user_form").submit(function(e) {
        var resp = $("#new_user_result");
        $("#new_user_button").attr('disabled', 'disabled');
        
        resp.hide().delay(50);
        var formvars = [
            $("#new_user_username").val(), //0
            $("#new_user_password").val(), //1
            $("#new_user_password_confirm").val(), //2
            $("#new_user_id").val(), //3
            $("#new_user_first_name").val(), //4
            $("#new_user_last_name").val(), //5
            $("#new_user_address").val(), //6
            $("#new_user_city").val(), //7
            $("#new_user_state").val(), //8
            $("#new_user_zip").val(), //9
            $("#new_user_tel").val(), //10
            $("#new_user_type").val(), //11
            
            $("#new_user_customer_email").val(), //12
            $("#new_user_customer_rating").val(), //13
            $("#new_user_customer_creditcardnumber").val(), //14

            $("#new_user_employee_ssn").val(), //15
            $("#new_user_employee_startdate").val(), //16
            $("#new_user_employee_hourlyrate").val() //17
        ];
        
        //Check for empty fields
        for (var i = 0;i < 12;i++) {
            if (i == 3) continue;
            if (formvars[i] == "") {
                resp.text("Please fill out all required fields.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        }
        if (formvars[11] == "Customer") {
            if (formvars[12] == "" || formvars[14] == "") {
                resp.text("Please fill out all required fields.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        } else if (formvars[11] == "Representative" || formvars[11] == "Manager") {
            if (formvars[15] == "" || formvars[16] == "" || formvars[17] == "") {
                resp.text("Please fill out all required fields.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        }
        
        //Check field specific things
        if (formvars[0].length < 5 || formvars[0].length > 20) {
            resp.text("User name must be 5 - 20 characters.");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        var validUserName = false, validUserId = false;
        $.ajax({
            type: "GET",
            async: false,
            url: '../backend/validate_form.php',
            data: { form: "new_user", field: "user_name", data: formvars[0] },
            success: function(data) {
                if (data == 1) { validUserName = true; } 
                else { validUserName = false; }
            }
        });
        if (!validUserName) {
            resp.text("That user name has already been taken!");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[1].length < 5 || formvars[1].length > 20) {
            resp.text("User password must be 5 - 20 characters.");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[1] != formvars[2]) {
            resp.text("User passwords do not match.");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[3] != "") {
            if (!isNumber(formvars[3]) || formvars[3] < 1 || formvars[3] > 999999999) {
                resp.text("User ID must be between 1 and 999999999.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        }
        if (formvars[3] == "") {
            validUserId = true;
        } else {
            $.ajax({
                type: "GET",
                async: false,
                url: '../backend/validate_form.php',
                data: { form: "new_user", field: "id", data: formvars[3] },
                success: function(data) {
                    if (data == 1) { validUserId = true; } 
                    else { validUserId = false; }
                }
            });
        }
        if (!validUserId) {
            resp.text("That user ID has already been taken!");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[4].length > 30) {
            resp.text("First name is too long. (Max: 30 characters)");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[5].length > 30) {
            resp.text("Last name is too long. (Max: 30 characters)");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[6].length > 75) {
            resp.text("Address is too long. (Max: 75 characters)");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[7].length > 50) {
            resp.text("City is too long. (Max: 50 characters)");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        
        if (formvars[9].length != 5 || !isNumber(formvars[9])) {
            resp.text("Zip code is incorrect.");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        if (formvars[10].length != 12 || formvars[10][3] != '-' || formvars[10][7] != '-' || !isTelNum(formvars[10])) {
            resp.text("Telephone # is incorrect.");
            resp.attr("class", "error");
            resp.show().delay(50);
            $("#new_user_button").removeAttr('disabled');
            return;
        }
        
        if (formvars[11] == "Customer") {
            if (!checkEmail(formvars[12])) {
                resp.text("Customer email address is incorrect.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
            if (formvars[13] != "") {
                if (!isNumber(formvars[13]) || formvars[13] < 0 || formvars[13] > 1000000) {
                    resp.text("Customer rating is incorrect.");
                    resp.attr("class", "error");
                    resp.show().delay(50);
                    $("#new_user_button").removeAttr('disabled');
                    return;
                }
            }
            if (!checkCCN(formvars[14])) {
                resp.text("Customer credit card number is incorrect.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        } else if (formvars[11] == "Representative" || formvars[11] == "Manager") {
            if (!isNumber(formvars[15]) || formvars[15].length != 9) {
                resp.text("Employee social security number incorrect.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
            if (!validDate(formvars[16])) {
                resp.text("Employee start date incorrect.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
            if (!isNumber(formvars[17])) {
                resp.text("Employee hourly rate incorrect.");
                resp.attr("class", "error");
                resp.show().delay(50);
                $("#new_user_button").removeAttr('disabled');
                return;
            }
        } 
        
        resp.text("Creating new user ...");
        resp.attr("class", "loading");
        resp.show().delay(50);
        
        $.ajax( {
            type: "POST",
            url: "backend/edit_user.php",
            dataType: "json",
            data: {
                action: "new",
                form: formvars
            },
            success: function(data) {
                if (data["Success"] == 1) {
                    clearNewUserForm();
                    resp.attr("class", "success");
                    resp.text("User created!");
                    resp.show(100).delay(50);
                    $("#new_user_button").removeAttr('disabled');
                } else {
                    resp.attr("class", "error");
                    resp.text(data["Msg"]);
                    resp.show(100).delay(50);
                    $("#new_user_button").removeAttr('disabled');
                }
            },                    
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                resp.attr("class", "error");
                resp.text("Something went wrong! Please try again later.");
                $("#new_user_button").removeAttr('disabled');
                resp.show(100).delay(50);
            }
        });
        
        
        
        
        return e.preventDefault();
    });
</script>